<template>
  <div class="home common-layout">
    <el-container style="height: 100%">
      <el-header>菜单栏</el-header>
      <el-container>
        <el-aside data-name="物料栏">
          <widget-panel />
        </el-aside>
        <el-container>
          <el-header :height="'32px'" data-name="工具栏">
            <ToolPanel></ToolPanel>
          </el-header>
          <el-main data-name="工作区">
            <DrawBoard></DrawBoard>
          </el-main>
          <el-footer data-name="状态栏">
            <StatusPanel></StatusPanel>
          </el-footer>
        </el-container>
        <el-aside data-name="属性栏">
          <SettingPanel></SettingPanel>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import WidgetPanel from "@/components/designer/widget-panel/index.vue";
import DrawBoard from "@/components/designer/draw-board/index.vue";
import ToolPanel from "@/components/designer/toolbar-panel/index.vue";
import SettingPanel from "@/components/designer/setting-panel/index.vue";
import StatusPanel from "@/components/designer/status-panel/index.vue";

export default {
  name: "HomeView",
  components: {
    WidgetPanel,
    DrawBoard,
    ToolPanel,
    SettingPanel,
    StatusPanel,
  },
};
</script>

<style lang="scss" scoped>
.common-layout {
  height: 100vh;
  // .el-header,
  // .el-footer,
  // .el-main,
  // .el-aside {
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  // }

  // .el-header,
  // .el-footer {
  //   background-color: #c6e2ff;
  //   color: var(--el-text-color-primary);
  //   text-align: center;
  // }

  // .el-aside {
  //   background-color: #d9ecff;
  //   color: var(--el-text-color-primary);
  //   text-align: center;
  // }

  // .el-main {
  //   background-color: var(--el-color-primary-light-9);
  //   color: var(--el-text-color-primary);
  //   text-align: center;

  //   height: 150px;
  // }
  .el-header,
  .el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    // line-height: 60px;
  }

  .el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    // line-height: 200px;
  }

  .el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    // line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    // line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    // line-height: 320px;
  }
}
</style>

